<template>
  <div ref="chartRef" style="width: 100%; height: 180px"/>
</template>

<script setup>
import {onMounted} from "vue";
import {useEcharts} from "../../../../hook/ useEcharts";
import * as echarts from "echarts";

const {chartRef, initChart, updateChart} = useEcharts();

let angle = 30; //角度，用来做简单的动画效果的
let value = 3241;
const option = {
  color: ['#20E7EA', '#2F80FF', '#64D52B', '#FEB51D', '#56D3A4', '#FECEA7', '#BCA0E2'],
  legend: {
    // data: ['处室一', '处室二', '处室三', '处室四', '处室五', '处室六', '处室七'],
    data: ['设计处','建管处','质安处','排水处','市场处','物业处','征收处'],
    top: "1%",
    right: '0%',
    textStyle: {
      color: '#fff',
      fontSize: 12,
    },
    width: 50,
    itemWidth: 15,
    itemHeight: 10,
  },
  title: {
    text: '任务总数\n' + value,
    // text: '{a|任务总数}' + '\n' + '{b|' + value + '}',
    x: 46,
    y: 65,
    textStyle: {
      color: '#fff',
      fontSize: 14,
    },
    textAlign: 'center',
  },
  series: [
    {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 3.45,
            cy: api.getHeight() / 2.3,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
            startAngle: (0 + angle) * Math.PI / 180,
            endAngle: (90 + angle) * Math.PI / 180
          },
          style: {
            stroke: "#3470f4", // 下上
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [50]
    }, {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 3.45;
        let y0 = api.getHeight() / 2.3;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
        let point = getCirlPoint(x0, y0, r, (90 + angle))
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 2
          },
          style: {
            stroke: "#3470f4", //下上
            fill: "#3470f4"
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 3.4,
            cy: api.getHeight() / 2.2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.58,
            startAngle: (180 + angle) * Math.PI / 180,
            endAngle: (270 + angle) * Math.PI / 180
          },
          style: {
            stroke: "#ebb53e", // 上内
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 3.4;
        let y0 = api.getHeight() / 2.2;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.58;
        let point = getCirlPoint(x0, y0, r, (270 + angle))
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 2
          },
          style: {
            stroke: "#ebb53e", //上内
            fill: "#ebb53e"
          },
          silent: true
        };
      },
      data: [0]
    },

    {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 3.5,
            cy: api.getHeight() / 2.2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
            startAngle: (270 + -angle) * Math.PI / 180,
            endAngle: (40 + -angle) * Math.PI / 180
          },
          style: {
            stroke: "#66FFFF", // 上外
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 3.45,
            cy: api.getHeight() / 2.25,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
            startAngle: (90 + -angle) * Math.PI / 180,
            endAngle: (220 + -angle) * Math.PI / 180
          },
          style: {
            stroke: "#66FFFF", // 下外
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    }, {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 3.45;
        let y0 = api.getHeight() / 2.25;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
        let point = getCirlPoint(x0, y0, r, (90 + -angle))
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 2
          },
          style: {
            stroke: "#4EE9E6",//下外
            fill: "#44D7B6"
          },
          silent: true
        };
      },
      data: [0]
    }, {
      name: "ring5", //绿点
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 3.5;
        let y0 = api.getHeight() / 2.2;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
        let point = getCirlPoint(x0, y0, r, (270 + -angle))
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 2
          },
          style: {
            stroke: "#44D7B6", // 上外
            fill: "#4EE9E6"
          },
          silent: true
        };
      },
      data: [0]
    }, {
      type: 'pie',
      radius: ['50%', '38%'],
      center: ["30%", "45%"],
      silent: true,
      clockwise: true,
      startAngle: 90,
      z: 0,
      zlevel: 0,
      label: {
        show: false,
      },
      data: [{
        name: "设计处",
        value: "3720"
      }, {
        name: "建管处",
        value: "2920"
      }, {
        name: "质安处",
        value: "2200"
      }, {
        name: "排水处",
        value: "1420"
      }, {
        name: "市场处",
        value: "1420"
      }, {
        name: "物业处",
        value: "1420"
      }, {
        name: "征收处",
        value: "1420"
      }
      ]
    },
  ]
};

//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
  let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
  let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
  return {
    x: x1,
    y: y1
  }
}

// 模拟更新图表数据
const updateData = () => {
  const newOption = {
    series: [],
  };
  updateChart(newOption);
};

onMounted(() => {
  // 初始化图表
  initChart(option);
});

</script>

<style scoped lang="scss">

</style>
